<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="php-ui">
        
        <title>Remote Binding | AutoComplete PHP Class</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Bind Kendo UI AutoComplete PHP class to JSON.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/php-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/php-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/php-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/php-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/php-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("php/widgets/autocomplete/remote-binding.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//php/widgets/autocomplete/remote-binding.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="remote-binding"><a href="#remote-binding">Remote Binding</a></h1>

<p>This article shows how to bind Kendo UI AutoComplete for PHP to a JSON response. Remote binding means that filter operations happen on the server side.</p>

<h2 id="bind-to-pdo-returned-arrays"><a href="#bind-to-pdo-returned-arrays">Bind to PDO-Returned Arrays</a></h2>

<h3 id="configuration"><a href="#configuration">Configuration</a></h3>

<p>Below are listed the steps for you to follow when configuring the Kendo UI AutoComplete for PHP for remote binding.</p>

<p><strong>Step 1</strong> Make sure you followed all the steps from the <a href="/php/introduction">introductory article on Telerik UI for PHP</a>—include the autoloader, JavaScript, and CSS files.</p>

<p><strong>Step 2</strong> Create a data source and configure it.</p>

<h6>Example</h6>

<pre><code>&lt;?php
$transport = new \Kendo\Data\DataSourceTransport();

$read = new \Kendo\Data\DataSourceTransportRead();

// Specify the url of the PHP page which will act as the remote service
$read-&gt;url('products.php')
     -&gt;type('POST');

$transport-&gt;read($read);

// Configure the model
$model = new \Kendo\Data\DataSourceSchemaModel();

$productNameField = new \Kendo\Data\DataSourceSchemaModelField('ProductName');
$productNameField-&gt;type('string');

$model-&gt;addField($productNameField);

$schema = new \Kendo\Data\DataSourceSchema();

$schema-&gt;model($model);

$dataSource = new \Kendo\Data\DataSource();

// Configure data source
$dataSource-&gt;transport($transport)
           -&gt;schema($schema);
?&gt;
</code></pre>

<p><strong>Step 3</strong> Create an AutoComplete, configure its <code>dataTextField</code> option and set its data source.</p>

<h6>Example</h6>

<pre><code>&lt;?php
$autoComplete = new \Kendo\UI\AutoComplete('AutoComplete');
$autoComplete-&gt;dataSource($dataSource);
$autoComplete-&gt;dataTextField('ProductName');
?&gt;
</code></pre>

<p><strong>Step 4</strong> Output the AutoComplete by echoing the result of the <code>render</code> method.</p>

<h6>Example</h6>

<pre><code>&lt;?php
echo $autoComplete-&gt;render();
?&gt;
</code></pre>

<h3 id="json-returning-file-creation"><a href="#json-returning-file-creation">JSON-Returning File Creation</a></h3>

<p>Below are listed the steps for you to follow when creating a PHP file which returns JSON.</p>

<p><strong>Step 1</strong> Create a new PHP file called <code>products.php</code>. This file will return data in JSON format. The data source is configured to request it via the <a href="/api/php/Kendo/Data/DataSourceTransportRead#url"><code>url</code></a> setting.</p>

<p><strong>Step 2</strong> Create a PDO connection.</p>

<h6>Example</h6>

<pre><code>&lt;?php
$db = new PDO('sqlite:../sample.db');
?&gt;
</code></pre>

<p><strong>Step 3</strong> Retrieve all records from the <strong>Products</strong> table.</p>

<h6>Example</h6>

<pre><code>&lt;?php
$statement = $db-&gt;prepare('SELECT * FROM Products');
$products = $statement-&gt;fetchAll(PDO::FETCH_ASSOC);
?&gt;
</code></pre>

<p><strong>Step 4</strong> Return the records as JSON.</p>

<h6>Example</h6>

<pre><code>&lt;?php
// Set response content type
header('Content-Type: application/json');
// Return JSON

echo json_encode($products);
?&gt;
</code></pre>

<h2 id="use-datasourceresult-helpers"><a href="#use-datasourceresult-helpers">Use DataSourceResult Helpers</a></h2>

<p>The <code>DataSourceResult</code> class is a helper utility on top of PDO which simplifies common CRUD operations. The <code>DataSourceResult</code> can also perform paging, sorting, filtering, grouping and aggregate calculation on the server side by generating SQL executed via PDO. It is distributed with the Telerik UI for PHP demos and can be found in the <code>/wrappers/php/lib/</code> directory of the Telerik UI for PHP distribution.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>The following demo is using the sample SQLite database shipped with the Telerik UI for PHP** demos (<code>/wrappers/php/sample.db</code>).</p>
</blockquote>

<p>First, configure a Kendo UI AutoComplete for PHP binding and then implement the remote service which will return JSON.</p>

<h3 id="configuration-datasourceresult"><a href="#configuration-datasourceresult">Configuration (DataSourceResult)</a></h3>

<p>Below are listed the steps for you to follow when configuring the AutoComplete for remote binding, using <code>DataSourceResult</code>.</p>

<p><strong>Step 1</strong> Follow the steps from the <a href="/php/introduction">introductory article on Telerik UI for PHP</a>—include the autoloader, JavaScript and CSS files.</p>

<p><strong>Step 2</strong> Create a data source and configure it.</p>

<h6>Example</h6>

<p>&lt;?php
   $transport = new \Kendo\Data\DataSourceTransport();</p>

<p>$read = new \Kendo\Data\DataSourceTransportRead();</p>

<p>// Specify the URL of the PHP page which will act as the remote service
   $read-&gt;url('products.php')
           -&gt;contentType('application/json')
           -&gt;type('POST');</p>

<pre><code>// Configure the transport to send the data source parameters as JSON.
// This is required by the DataSourceResult helper.
$transport-&gt;read($read)
          -&gt;parameterMap('function(data) {
              return kendo.stringify(data);
          }');

// Configure the model
$model = new \Kendo\Data\DataSourceSchemaModel();

$productNameField = new \Kendo\Data\DataSourceSchemaModelField('ProductName');
$productNameField-&gt;type('string');

$model-&gt;addField($productNameField);

$schema = new \Kendo\Data\DataSourceSchema();
// Configure the schema to accept the format returned by DataSourceResult
$schema-&gt;model($model)
       -&gt;data('data')
       -&gt;errors('errors')
       -&gt;total('total');

$dataSource = new \Kendo\Data\DataSource();

// Configure data source and enable server filtering operation.
$dataSource-&gt;transport($transport)
           -&gt;schema($schema)
           -&gt;serverFiltering(true);
?&gt;
</code></pre>

<p><strong>Step 3</strong> Create an AutoComplete, configure its <code>dataTextField</code> option and set its <code>dataSource</code>.</p>

<h6>Example</h6>

<pre><code>&lt;?php
$autoComplete = new \Kendo\UI\AutoComplete('AutoComplete');
$autoComplete-&gt;dataSource($dataSource);
$autoComplete-&gt;dataTextField('ProductName');
?&gt;
</code></pre>

<p><strong>Step 4</strong> Output the AutoComplete by echoing the result of the <code>render</code> method.</p>

<h6>Example</h6>

<pre><code>&lt;?php
echo $autoComplete-&gt;render();
?&gt;
</code></pre>

<h3 id="json-returning-file-creation-datasourceresult"><a href="#json-returning-file-creation-datasourceresult">JSON-Returning File Creation (DataSourceResult)</a></h3>

<p>Below are listed the steps for you to follow when creating a PHP file which returns JSON, using DataSourceResult.</p>

<p><strong>Step 1</strong> Create a new PHP file called <code>products.php</code>. This file will return data in JSON format. The data source is configured to request it via the <a href="/api/php/Kendo/Data/DataSourceTransportRead#url"><code>url</code></a> setting.</p>

<p><strong>Step 2</strong> Copy <code>/wrappers/php/lib/DataSourceResult.php</code> to your web site root and include it.</p>

<h6>Example</h6>

<pre><code>    &lt;?php require_once 'lib/DataSourceResult.php'; ?&gt;
</code></pre>

<p><strong>Step 3</strong> Read the request body and parse it as JSON. In the previous example you configured the Kendo UI DataSource to submit its parameters as JSON via the <a href="/api/php/Kendo/Data/DataSourceTransport#parametermap"><code>parameterMap</code></a>.</p>

<h6>Example</h6>

<pre><code>    &lt;?php
    $request = json_decode(file_get_contents('php://input'));
    ?&gt;
</code></pre>

<p><strong>Step 4</strong> Create a new instance of the <code>DataSourceResult</code> class and call its <code>read</code> method.</p>

<h6>Example</h6>

<pre><code>    &lt;?php
    $result = new DataSourceResult('sqlite:../sample.db');

    // The 'read' method accepts table name, array of columns to select and request parameters as array
    $data = $result-&gt;read('Products', array('ProductName'), $request));
    ?&gt;
</code></pre>

<p><strong>Step 5</strong> Return the result of the <code>read</code> method as JSON.</p>

<h6>Example</h6>

<pre><code>    &lt;?php
    // Set response content type
    header('Content-Type: application/json');
    // Return JSON

    echo json_encode($data);
    ?&gt;
</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on Telerik UI for PHP and on the AutoComplete:</p>

<ul>
<li><a href="/php/widgets/autocomplete/overview">Overview of the AutoComplete PHP Class</a></li>
<li><a href="/php/widgets/autocomplete/local-binding">Local Binding of the AutoComplete PHP Class</a></li>
<li><a href="/controls/editors/autocomplete/overview">Overview of the Kendo UI AutoComplete Widget</a></li>
<li><a href="/api/php/Kendo/UI/AutoComplete">Telerik UI for PHP API Reference Folder</a></li>
<li><a href="/php/widgets/autocomplete/overview">Telerik UI for PHP Classes Folder</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

